<template>
    <div id="app">
        <router-view/>
    </div>
</template>

<script>
export default {
    data: function () {
        return {}
    },
    name: 'layout',
    mounted() {
        this.zoomChange()
        var that = this;
        window.addEventListener("resize", function () {
            that.zoomChange()
        })
    },
    methods: {
        zoomChange: function () {
            var percent = window.innerWidth / window.innerHeight
            var zoom
            if(percent < 1.78) {
                zoom = window.innerWidth / 1920
            }else{
                zoom = window.innerHeight / 1080
            }
            this.$store.dispatch('actionChangeZoom', {zoom: zoom})
        }
    },
    watch: {
        '$route'(val) {
            this.zoomChange()
        }
    }
}
</script>